import clsx from 'clsx';
import MarkdownIt from 'markdown-it';
import 'github-markdown-css/github-markdown.css';

interface Props {
  content: string;
  className?: string;
}

export function MarkdownRender({ content, className }: Props) {
  const mdParser = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
  });

  const html = mdParser.render(content);

  return (
    <div
      className={clsx('markdown-body', className)}
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}
